<template>
  <div class="echarts">
    <!-- 面包屑导航 -->
    <mybreadcrumb />

    <div class="box">
      <div id="main"></div>
      <div id="main2"></div>
    </div>
  </div>
</template>

<script setup>

//1.导入echarts
import * as echarts from 'echarts';

import {onMounted} from 'vue'

onMounted(()=>{
  //2.初始化echarts实例( 注意: 一定要在组件挂载期执行 )
  var myChart = echarts.init(document.getElementById('main'));
  //2.初始化echarts实例( 注意: 一定要在组件挂载期执行 )
  var myChart2 = echarts.init(document.getElementById('main2'));

  //3.绘制图表
  myChart.setOption({
    title: { //标题
      text: '柱状图',
      left: 'center'
    },
    legend:{ //图例
      top:30
    },
    tooltip: { //悬浮提示

    },
    xAxis: { //x轴设置
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: { //y轴设置

    },
    series: [ //数据系列
      {
        name: '销量',
        type: 'bar', //bar 柱状图, line 折线图 , pie 饼状图
        data: [5, 20, 36, 10, 10, 20],
        showBackground: true,  //显示背景
        backgroundStyle:{ //背景样式
          borderRadius:40, //圆角边框
          // color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [  //颜色(渐变色)
          // 		{ offset: 0, color: '#83bf00' },
          // 		{ offset: 0.5, color: '#1800f0' },
          // 		{ offset: 1, color: '#1800f0' }
          // ])
        },
        barWidth:'10',	//柱状条宽度
        itemStyle: {	//柱状条样式
          borderRadius:40,	//圆角边框
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ //颜色(渐变色)
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
          ])
        },
      },
    ]
  })

  //3.绘制图表2
  myChart2.setOption({
    title: { //标题
      text: '折线图',
      left: 'center'
    },
    legend:{ //图例
      top:30
    },
    tooltip: { //悬浮提示

    },
    xAxis: { //x轴设置
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: { //y轴设置

    },
    series: [ //数据系列

      {
        name: '金额',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
      }
  ]
  })
})

</script>

<style scoped>
.box{
  display: flex;
}
#main,#main2{
  width: 50%;
  height: 300px;
}

</style>